import React from 'react'
import { Space, Button, Row, Col, Radio, RadioChangeEvent } from 'antd'
interface Props {

}

const SearchTypes = (props: Props) => {
    const spaceSize = 20;
    const onChange = (e: RadioChangeEvent) => {
        console.log(e.target.value);
    }
    return (
        <div>
            <Row gutter={[20, 14]}>
                <Col span={24}>
                    <Radio.Group optionType="button" buttonStyle="solid" onChange={onChange} defaultValue="a">
                        <Space size={spaceSize}>
                            <Radio.Button value="a" >综合排序</Radio.Button>
                            <Radio.Button value="b">点击最多</Radio.Button>
                            <Radio.Button value="c">最新发布</Radio.Button>
                            <Radio.Button value="d">最多弹幕</Radio.Button>
                            <Radio.Button value="e">最多收藏</Radio.Button>
                        </Space>
                    </Radio.Group>
                </Col>
                <Col span={24}>
                    <Radio.Group optionType="button" buttonStyle="solid" defaultValue="a">
                        <Space size={spaceSize}>
                            <Radio.Button value="a" >全部时长</Radio.Button>
                            <Radio.Button value="b">10分钟以下</Radio.Button>
                            <Radio.Button value="c">10-30分钟</Radio.Button>
                            <Radio.Button value="d">30-60分钟</Radio.Button>
                            <Radio.Button value="e">60分钟以上</Radio.Button>
                        </Space>
                    </Radio.Group>
                </Col>
                <Col span={24}>
                    <Radio.Group optionType="button" buttonStyle="solid" defaultValue="a">
                        <Space size={spaceSize}>
                            <Radio.Button value="a" >全部分类</Radio.Button>
                            <Radio.Button value="b">知识</Radio.Button>
                            <Radio.Button value="c">娱乐</Radio.Button>
                            <Radio.Button value="d">电影</Radio.Button>
                            <Radio.Button value="e">电视剧</Radio.Button>
                            <Radio.Button value="f">纪录片</Radio.Button>
                            <Radio.Button value="g">美食</Radio.Button>
                            <Radio.Button value="h">音乐</Radio.Button>
                        </Space>
                    </Radio.Group>
                </Col>
            </Row>

        </div>
    )
}

export default SearchTypes;

